<template>
    <div>
        <Form
            ref="entityForm"
            class="page-sys-user-drawer-form"
            :model="entity"
            :rules="entityRules"
            :disabled="drawerType === 'read'"
            label-position="top"
            label-colon
            hide-required-mark
        >
            <Row :gutter="32">
                <Col span="12">
                    <FormItem prop="name" label="姓名">
                        <Input v-model="entity.name" placeholder="请输入姓名" />
                    </FormItem>
                </Col>
                <Col span="12">
                    <FormItem prop="mobile" label="手机号">
                        <Input
                            v-model="entity.mobile"
                            placeholder="请输入手机号"
                        />
                    </FormItem>
                </Col>
                <Col span="12">
                    <FormItem prop="account" label="会员账号">
                        <Input
                            v-model="entity.account"
                            placeholder="请输入会员账号"
                        />
                    </FormItem>
                </Col>
                <Col span="12">
                    <FormItem prop="openId" label="微信OpenId">
                        <Input
                            v-model="entity.openId"
                            placeholder="请输入微信OpenId"
                        />
                    </FormItem>
                </Col>
                <Col span="12">
                    <FormItem prop="headImg" label="头像路径">
                        <Input
                            v-model="entity.headImg"
                            placeholder="请输入头像路径"
                        />
                    </FormItem>
                </Col>
          
                <Col span="12">
                    <FormItem prop="memberType" label="会员类型">
                        <Select v-model.number="entity.memberType">
                            <Option :value="1">员工</Option>
                            <Option :value="2">业主</Option>
                            <Option :value="3">游客</Option>
                        </Select>
                    </FormItem>
                </Col>
                <Col span="12">
                    <FormItem prop="enableVisitor" label="访客功能">
                        <Select v-model.number="entity.enableVisitor">
                            <Option :value="1">启用</Option>
                            <Option :value="0">禁用</Option>
                        </Select>
                    </FormItem>
                </Col>
                <Col span="12">
                    <FormItem prop="memberType" label="是否启用">
                        <Select v-model.number="entity.enableFlag">
                            <Option :value="1">是</Option>
                            <Option :value="0">否</Option>
                        </Select>
                    </FormItem>
                </Col>
                <Col span="12">
                    <FormItem prop="banlance" label="钱包余额">
                        <Input
                            v-model="entity.banlance"
                            placeholder="请输入钱包余额"
                        />
                    </FormItem>
                </Col>
                <Col span="12">
                    <FormItem prop="score" label="积分">
                        <Input
                            v-model="entity.score"
                            placeholder="请输入积分"
                        />
                    </FormItem>
                </Col>
                <Col span="12">
                    <FormItem prop="facePhoto" label="人脸图像">
                        <Upload 
                        :before-upload="handleUpload" 
                        :format="['jpg','jpeg','png']"
                        :action="uploadUrl"
                        :on-success="handleSuccess"
                        :default-file-list="fileList"
                        :on-remove="fileRemove"
                        :on-error="handleError" >
                        <Button icon="ios-cloud-upload-outline">选择人脸识别图像...</Button>
                        </Upload>
                    </FormItem>
                </Col>
                 <div class="demo-upload-list" v-for="item in fileList" :key="item.url">
                    <template>
                        <img :src="item.url"  style="width:100xp;height:100px">
                        <div class="demo-upload-list-cover">
                        </div>
                    </template>
                </div>
            </Row>
            <Divider />
        </Form>
        <div class="page-sys-user-drawer-footer" v-if="drawerType != 'read'">
            <Button
                type="primary"
                @click="handleSubmitEdit"
                :loading="submitting"
                >提交</Button
            >
        </div>
    <Modal title="View Image" v-model="visible">
        <img :src="imageUrl" v-if="visible" style="width: 100%">
    </Modal>
    </div>
</template>
<script>
    import { mapState } from "vuex";
    import { SaveData, GetData } from "@api/member";
    import Setting from '@/setting';

    export default {
        name: "table-form",
        props: {
            entityId: String,
            drawerType: String
        },
        data() {
            return {
                submitting: false,
                entity: {
                    id: null,
                    account: "",
                    openId: "",
                    name: "",
                    headImg: "",
                    mobile: "",
                    memberType: 3,
                    banlance: 0,
                    score: 0,
                    enableFlag: 1,
                    facePhotoName:"",
                    facePhoto:""
                },
                file:null,
                fileList:[],
                loadingStatus: false,
                entityRules: {},
                imageUrl:"",
                visible:false,
                uploadUrl:Setting.apiBaseURL+'/api/digitalcanteen/User/upload'
            };
        },
        computed: {
            ...mapState("admin/layout", ["isMobile"]),
            labelWidth() {
                return this.isMobile ? undefined : 100;
            },
            labelPosition() {
                return this.isMobile ? "top" : "right";
            }
        },
        methods: {
            initEntity() {
                GetData(this.entityId).then(res => {
                    if (res.errcode != 0) {
                        this.$Message.error(res.msg);
                        return;
                    }
                    this.entity = res.data;
                    
                    if(res.data.facePhoto!=null)
                    {
                        this.$data.fileList.push({name:res.data.facePhotoName,
                                                  url:Setting.apiBaseURL+res.data.facePhoto,
                        });
                    }
                });
            },
            handleSubmitEdit() {
                this.$refs.entityForm.validate(valid => {
                    if (valid) {
                        if (this.submitting) return;
                        this.submitting = true;

                        SaveData(this.entity).then(res => {
                            this.submitting = false;
                            if (res.errcode != 0) {
                                this.$Message.error(res.msg);
                                return;
                            }
                            this.$emit("saveFinished");
                        });
                    }
                });
            },
            handleUpload (file) {
                this.file = file;
                var index=file.name.substr(file.name.lastIndexOf('.')+1);
                if(!(index=="png"||index=="jpeg"||index=="jpg"))
                {
                    this.file=null;
                    this.$Message.warning("请选择正确的文件格式");
                    return false;
                }
                this.entity.facePhotoName=file.name;
            },
            handleSuccess (response,file, fileList) {
                this.loadingStatus = false;
                if(response.errcode!=0)
                {
                    this.$Message.error("保存文件失败");
                    return;
                }
                this.$data.entity.facePhoto=response.data.fileSavePath;
                if(fileList.length>1)
                {
                    fileList.shift();
                }
                this.$Message.success('上传成功');
            },
            fileRemove(file, fileList){
                fileList.shift();
                this.$data.entity.facePhoto="";
            },
            handleError () {
                this.file = null;
                this.loadingStatus = false;
                this.$Message.error('上传失败');
            },
            handleView(name){
                this.imageUrl = name;
                this.visible = true
            }
        },
        mounted() {
            if (this.entityId) this.initEntity();
        }
    };
</script>
